<script setup lang="ts">
import dayjs from 'dayjs'

const props = defineProps<{
  type: string
  price: string
  minisum: string
  expireTime: dayjs.Dayjs
  expired?: boolean
  num: number // 优惠券数量
}>()

const displayedTime = computed(() => {
  return dayjs.unix(dayjs(Number(props.expireTime) - Date.now()).unix()).format('HH:mm:ss')
})
</script>

<template>
  <view class="relative mr-24rpx">
    <image
      class="h-301rpx w-238rpx"
      src="@/static/images/coupon_bg_vertical.png"
    />
    <view class="absolute bottom-0 left-0 right-0 top-0 z-10 flex flex-col items-center">
      <view class="rounded-b-20rpx bg-#FA662F px-16rpx py-4rpx text-22rpx text-white font-medium leading-22rpx">
        {{ `距结束${displayedTime}` }}
      </view>
      <Spacer height="16" />
      <view class="text-26rpx text-#333333 leading-26rpx">
        {{ type }}
      </view>
      <Spacer height="16" />
      <view class="text-50rpx text-#F53B25 font-bold leading-50rpx">
        ¥ {{ parseInt(price) }}
      </view>
      <Spacer height="12" />
      <view class="text-24rpx text-#999999 leading-24rpx">
        满{{ parseInt(minisum) }}元减{{ parseInt(price) }}元
      </view>
      <view class="flex-1" />
      <view v-if="num === 0" class="rounded-full bg-black bg-opacity-10 px-25rpx py-13rpx text-28rpx text-white font-bold leading-32rpx">
        已抢光
      </view>
      <button v-else class="rounded-full bg-white px-25rpx py-13rpx text-28rpx text-#FA662F font-bold leading-32rpx">
        立即领取
      </button>
      <Spacer height="32" />
    </view>
  </view>
</template>
